import React from 'react'
import { clsx } from 'clsx'

// 响应式容器组件
interface ResponsiveContainerProps {
  children: React.ReactNode
  className?: string
  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
  padding?: 'none' | 'sm' | 'md' | 'lg'
}

export const ResponsiveContainer: React.FC<ResponsiveContainerProps> = ({
  children,
  className = '',
  maxWidth = 'lg',
  padding = 'md'
}) => {
  const maxWidthClasses = {
    sm: 'max-w-sm',
    md: 'max-w-md', 
    lg: 'max-w-lg',
    xl: 'max-w-xl',
    '2xl': 'max-w-2xl',
    full: 'max-w-full'
  }

  const paddingClasses = {
    none: '',
    sm: 'px-4',
    md: 'px-4 md:px-6',
    lg: 'px-4 md:px-6 lg:px-8'
  }

  return (
    <div className={clsx(
      'mx-auto',
      maxWidthClasses[maxWidth],
      paddingClasses[padding],
      className
    )}>
      {children}
    </div>
  )
}

// 响应式网格组件
interface ResponsiveGridProps {
  children: React.ReactNode
  className?: string
  cols?: {
    default: number
    sm?: number
    md?: number
    lg?: number
    xl?: number
  }
  gap?: 'sm' | 'md' | 'lg' | 'xl'
}

export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
  children,
  className = '',
  cols = { default: 1 },
  gap = 'md'
}) => {
  const gapClasses = {
    sm: 'gap-2',
    md: 'gap-4',
    lg: 'gap-6',
    xl: 'gap-8'
  }

  const colsClasses = [
    `grid-cols-${cols.default}`,
    cols.sm && `sm:grid-cols-${cols.sm}`,
    cols.md && `md:grid-cols-${cols.md}`,
    cols.lg && `lg:grid-cols-${cols.lg}`,
    cols.xl && `xl:grid-cols-${cols.xl}`
  ].filter(Boolean).join(' ')

  return (
    <div className={clsx(
      'grid',
      colsClasses,
      gapClasses[gap],
      className
    )}>
      {children}
    </div>
  )
}

// 响应式堆栈组件
interface ResponsiveStackProps {
  children: React.ReactNode
  className?: string
  direction?: {
    default: 'row' | 'col'
    sm?: 'row' | 'col'
    md?: 'row' | 'col'
    lg?: 'row' | 'col'
  }
  gap?: 'sm' | 'md' | 'lg' | 'xl'
  align?: 'start' | 'center' | 'end' | 'stretch'
  justify?: 'start' | 'center' | 'end' | 'between' | 'around'
}

export const ResponsiveStack: React.FC<ResponsiveStackProps> = ({
  children,
  className = '',
  direction = { default: 'col' },
  gap = 'md',
  align = 'stretch',
  justify = 'start'
}) => {
  const gapClasses = {
    sm: 'gap-2',
    md: 'gap-4', 
    lg: 'gap-6',
    xl: 'gap-8'
  }

  const alignClasses = {
    start: 'items-start',
    center: 'items-center',
    end: 'items-end',
    stretch: 'items-stretch'
  }

  const justifyClasses = {
    start: 'justify-start',
    center: 'justify-center', 
    end: 'justify-end',
    between: 'justify-between',
    around: 'justify-around'
  }

  const directionClasses = [
    direction.default === 'row' ? 'flex-row' : 'flex-col',
    direction.sm && (direction.sm === 'row' ? 'sm:flex-row' : 'sm:flex-col'),
    direction.md && (direction.md === 'row' ? 'md:flex-row' : 'md:flex-col'),
    direction.lg && (direction.lg === 'row' ? 'lg:flex-row' : 'lg:flex-col')
  ].filter(Boolean).join(' ')

  return (
    <div className={clsx(
      'flex',
      directionClasses,
      gapClasses[gap],
      alignClasses[align],
      justifyClasses[justify],
      className
    )}>
      {children}
    </div>
  )
}

// 响应式隐藏/显示组件
interface ResponsiveVisibilityProps {
  children: React.ReactNode
  show?: ('sm' | 'md' | 'lg' | 'xl')[]
  hide?: ('sm' | 'md' | 'lg' | 'xl')[]
  className?: string
}

export const ResponsiveVisibility: React.FC<ResponsiveVisibilityProps> = ({
  children,
  show = [],
  hide = [],
  className = ''
}) => {
  const visibilityClasses = [
    // 默认隐藏，指定尺寸显示
    show.length > 0 && 'hidden',
    show.includes('sm') && 'sm:block',
    show.includes('md') && 'md:block', 
    show.includes('lg') && 'lg:block',
    show.includes('xl') && 'xl:block',
    // 指定尺寸隐藏
    hide.includes('sm') && 'sm:hidden',
    hide.includes('md') && 'md:hidden',
    hide.includes('lg') && 'lg:hidden',
    hide.includes('xl') && 'xl:hidden'
  ].filter(Boolean).join(' ')

  return (
    <div className={clsx(visibilityClasses, className)}>
      {children}
    </div>
  )
}

// 移动端侧边栏覆盖层
interface MobileOverlayProps {
  isOpen: boolean
  onClose: () => void
  children: React.ReactNode
  className?: string
}

export const MobileOverlay: React.FC<MobileOverlayProps> = ({
  isOpen,
  onClose,
  children,
  className = ''
}) => {
  if (!isOpen) return null

  return (
    <>
      {/* 背景遮罩 */}
      <div 
        className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"
        onClick={onClose}
      />
      
      {/* 侧边栏内容 */}
      <div className={clsx(
        'fixed top-0 left-0 h-full w-80 bg-white shadow-xl z-50 md:hidden',
        'transform transition-transform duration-300 ease-out',
        isOpen ? 'translate-x-0' : '-translate-x-full',
        className
      )}>
        {children}
      </div>
    </>
  )
}

// 响应式文本大小
interface ResponsiveTextProps {
  children: React.ReactNode
  className?: string
  size?: {
    default: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl'
    sm?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl'
    md?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl'
    lg?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl'
  }
}

export const ResponsiveText: React.FC<ResponsiveTextProps> = ({
  children,
  className = '',
  size = { default: 'base' }
}) => {
  const sizeClasses = [
    `text-${size.default}`,
    size.sm && `sm:text-${size.sm}`,
    size.md && `md:text-${size.md}`,
    size.lg && `lg:text-${size.lg}`
  ].filter(Boolean).join(' ')

  return (
    <div className={clsx(sizeClasses, className)}>
      {children}
    </div>
  )
}

// 断点检测 Hook
export const useBreakpoint = () => {
  const [breakpoint, setBreakpoint] = React.useState<'sm' | 'md' | 'lg' | 'xl'>('lg')

  React.useEffect(() => {
    const updateBreakpoint = () => {
      const width = window.innerWidth
      if (width < 640) setBreakpoint('sm')
      else if (width < 768) setBreakpoint('md') 
      else if (width < 1024) setBreakpoint('lg')
      else setBreakpoint('xl')
    }

    updateBreakpoint()
    window.addEventListener('resize', updateBreakpoint)
    return () => window.removeEventListener('resize', updateBreakpoint)
  }, [])

  return {
    breakpoint,
    isMobile: breakpoint === 'sm',
    isTablet: breakpoint === 'md',
    isDesktop: breakpoint === 'lg' || breakpoint === 'xl'
  }
}